<template>
	<view>
		<video class="play-win" v-if="lessonInfo.type=='3'"
		:src="lessonInfo.lessonUrl"
		 controls show-center-play-btn enable-progress-gesture></video>
		<view class="play-win" v-else>
			<image class="play-win-img" :src="lessonInfo.banner"></image>
			<view class="preview" @click="preview(lessonInfo.lessonUrl)">预览</view>
		</view>
		<view class="instruct">
			<view class="lesson-name">
				<view>{{lessonInfo.lessonName}}</view>
				<view class="brief" @click="showPop=true">简介 ></view>
			</view>
			<view class="teacher">
				<view>{{lessonInfo.tutor}}</view>
				<view>{{lessonInfo.createTime}}</view>
			</view>
		</view>

		<view class="divider"></view>
		<view class="homework">
			<view class="homework-label">作业</view>
			<view class="homework-info" v-if="hasHomework">
				<view>
					<view>{{lessonInfo.homeworkName}}</view>
					<view v-if="lessonInfo.status!='3'" class="homework-time">截止时间：{{lessonInfo.homeworkEndtime}}</view>
				</view>
				<view class="homework-status-exam" @click="clickHomework">
					<text v-if="lessonInfo.status=='0'" class="item-status-exam">开始测评</text>
					<text v-else-if="lessonInfo.status=='3'" class="item-status-look">查看</text>
					<text v-else-if="lessonInfo.status=='4'" class="item-status-end">已结束</text>
					<text v-else-if="lessonInfo.status=='1'" class="item-status-report">报告/解析</text>
				</view>
			</view>
			<view class="homework-info" v-else>无</view>
		</view>

		<view class="divider"></view>
		<discuss-list @refresh="loadData" :discussId="lessonInfo.discussId" :discussList="lessonInfo.discussDetail" :total="total"></discuss-list>
		<round-dialog v-if="showDialog" @close="closeDialog" :publishTime="publishTime"></round-dialog>
		<!-- 底部弹出简介弹窗 -->
		<view class="pop" @click="showPop = false" v-if="showPop" >
			<view class="pop-content">
				<view class="pop-content-up">
					<view>
						<view>{{lessonInfo.lessonName}}</view>
					</view>
					<view class="pop-content-flex pop-content-small">
						<view>{{lessonInfo.tutor}}</view>
						<view>{{lessonInfo.createTime}}</view>
					</view>
				</view>
				<view class="pop-content-title">简介</view>
				<rich-text class="pop-content-default" :nodes="lessonInfo.desc"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index.js'
	import discussList from './fragment/discussList.vue'
	import previewOffice from '@/mixins/previewOffice.js'
	import CourseService from '@/services/course.js'
	const courseService = new CourseService()
	export default {
		mixins:[previewOffice],
		components: {
			discussList
		},
		data() {
			return {
				platform: '',
				lessonId: '',
				showDialog: false,
				showPop: false,
				publishTime: '',
				lessonInfo: {},
			}
		},
		computed: {
			hasHomework() {
				return !isEmpty(this.lessonInfo.homeworkName)
			},
			total(){
				if(isEmpty(this.lessonInfo.discussDetail)){
					return 0
				}
				return this.lessonInfo.discussDetail.length;
			}
		},
		onReady() {
			let top;
			uni.getSystemInfo({
				success: (info) => {
					this.platform = info.platform
				}
			})
		},
		onLoad(query) {
			this.lessonId = query.lessonId;
			this.loadData();
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			if (!this.downloading) {
				return false;
			}
			uni.showModal({
				title: '',
				content: '正在下载文件，返回将取消下载，确定返回吗？',
				success: (res) => {
					if (res.confirm) { //确定返回，终止下载任务，并返回
						this.abort();
						uni.navigateBack()
					}
				}
			})
			return true
		},
	
		methods: {
			loadData() {
				const params = {
					lessonId: this.lessonId
				}
				courseService.lessonInfo(params).then(res => {
					if (res.success) {
						this.lessonInfo = res.result;
					}
				})
			},
			closeDialog() {
				this.showDialog = false;
			},
			clickHomework() {
				const status = this.lessonInfo.status
				if (status == '2') {
					this.publishTime = this.lessonInfo.publishTime
					this.showDialog = true
					return;
				}
				if (status == '0') {
					uni.navigateTo({
						url: `/pages/homework/index?lessonId=${this.lessonId}`
					})
				} else if (status == '1') {
					uni.navigateTo({
						url: `/pages/homework/result?lessonId=${this.lessonId}`
					})
				} else if (status == '3') {
					uni.navigateTo({
						url: `/pages/course/offlineHomework?lessonId=${this.lessonId}`
					})
				} else if (status == '4') {
					showToast("超过截止时间啦～")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.play-win {
		width: 100%;
		height: 500upx;
		position: relative;

		&-img {
			width: 100%;
			height: 100%;
		}
	}

	.preview {
		position: absolute;
		bottom: 30upx;
		right: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.6);
		font-size: 26upx;
		color: white;
		padding: 5upx 10upx;
		border-radius: 10upx;
	}

	.instruct {
		font-size: 34upx;
		color: #333333;
		padding: 30upx 20upx;
		
		.brief {
			color: #999;
			font-size: 28upx;
			font-weight: 400;
		}
	}

	.lesson-name,
	.teacher {
		display: flex;
		justify-content: space-between;
	}

	.lesson-name {
		font-weight: bold;
	}

	.teacher {
		font-size: 24upx;
		color: #999999;
		margin-top: 20upx;
	}

	.homework {
		font-size: 34upx;
		color: #333333;
		padding: 40upx 20upx;
		line-height: 1;
		&-label {
			font-weight: bold;
			margin-bottom: 30upx;
		}

		&-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30upx;
		}

		&-time {
			font-size: 24upx;
			color: #999999;
			margin-top: 20upx;
		}

		&-status-exam {
			font-size: 24upx;
			color: #FFFFFF;
			background-color: #4a96f2;
			border-radius: 8upx;
			padding: 0 8upx;
			line-height: 60upx;
		}
	}

	.divider {
		height: 1px;
		background-color: #e6e6e6;
		width: 709upx;
		margin-left: auto;
		margin-right: auto;
	}

	.pop {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);


		&-content {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			border-top-left-radius: 24upx;
			border-top-right-radius: 24upx;
			padding: 0 20upx 40upx;
			font-size: 28upx;
			color: #333333;

			&-up {
				padding: 40upx 0;
				border-bottom: 2upx solid #dddddd;
			}

			&-small {
				font-size: 24upx;
				color: #999999;
			}

			&-flex {
				display: flex;
				justify-content: space-between;
				margin-top: 20upx;
			}

			&-title {
				font-weight: 500;
				line-height: 120upx;
			}

			&-default {
				font-size: 28upx;
				color: #666666;
				margin-top: 40upx;
			}
		}
	}
</style>
